﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="row profile">

    <div class="col-lg-5 col-md-7 col-sm-7">
        <div class="panel">
            <div class="panel-body">
                <div class="text-left bk-bg-white bk-padding-top-40 bk-padding-bottom-10">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bk-vcenter text-center">
                            <div class="bk-avatar">
                                <img src="@Url.Content("~/Assets/img/avatar.jpg")" alt="" class="img-circle bk-img-120 bk-border-light-gray bk-border-3x">
                            </div>
                            <h4 class="bk-margin-top-10 bk-docs-font-weight-300">Jhon Smith</h4>
                        </div>
                        <hr class="bk-margin-off">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <a class="col-xs-4 bk-bg-white bk-fg-primary bk-padding-top-20 bk-padding-bottom-20 text-center">
                                <i class="fa fa-facebook"></i>
                            </a>
                            <a class="col-xs-4 bk-bg-white bk-fg-success bk-padding-top-20 bk-padding-bottom-20 text-center">
                                <i class="fa fa-twitter"></i>
                            </a>
                            <a class="col-xs-4 bk-bg-white bk-fg-danger bk-padding-top-20 bk-padding-bottom-20 text-center">
                                <i class="fa fa-google-plus"></i>
                            </a>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-left bk-vcenter text-center">
                            <hr class="bk-margin-off">
                            <small>HTML: 60%</small>
                            <div class="progress bk-margin-bottom-10" style="height: 8px;">
                                <div class="progress thin progress-striped active">
                                    <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                        <span class="sr-only">60% Complete</span>
                                    </div>
                                </div>
                            </div>
                            <small>CSS: 88%</small>
                            <div class="progress bk-margin-bottom-10" style="height: 8px;">
                                <div class="progress thin progress-striped active">
                                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100" style="width: 88%;">
                                        <span class="sr-only">88% Complete</span>
                                    </div>
                                </div>
                            </div>
                            <small>JS: 35%</small>
                            <div class="progress bk-margin-off-bottom" style="height: 8px;">
                                <div class="progress thin progress-striped active">
                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width: 35%;">
                                        <span class="sr-only">35% Complete</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <hr class="bk-margin-off">
                <div class="bk-ltr bk-bg-white">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="bk-widget bk-border-off bk-webkit-fix">
                                <div class="bk-bg-white text-center bk-padding-top-20 bk-padding-bottom-10">
                                    <div class="row">
                                        <div class="text-left bk-padding-left-10">
                                            <h4 class="bk-margin-off">General Information</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="bs-example">
                                    <div id="carousel-example-generic3" class="carousel bk-carousel-fade slide" data-ride="carousel">
                                        <div class="carousel-inner">
                                            <div class="item">
                                                <a class="panel-body bk-bg-white bk-bg-lighten bk-padding-off-top bk-padding-off-bottom">
                                                    <div class="pull-left bk-margin-top-10 bk-margin-right-10">
                                                        <div class="bk-round bk-bg-darken bk-border-off bk-icon bk-icon-default bk-bg-primary">
                                                            <i class="fa fa-thumbs-up"></i>
                                                        </div>
                                                    </div>
                                                    <h5 class="bk-fg-primary bk-fg-darken bk-margin-off-bottom">Position</h5>
                                                    <p>
                                                        <small>Staff Administrator</small>
                                                    </p>
                                                </a>
                                            </div>
                                            <div class="item active">
                                                <a class="panel-body bk-bg-white bk-bg-lighten bk-padding-off-top bk-padding-off-bottom">
                                                    <div class="pull-left bk-margin-top-10 bk-margin-right-10">
                                                        <div class="bk-round bk-bg-darken bk-border-off bk-icon bk-icon-default bk-bg-info">
                                                            <i class="fa fa-building-o"></i>
                                                        </div>
                                                    </div>
                                                    <h5 class="bk-fg-info bk-fg-darken bk-margin-off-bottom">Company Name</h5>
                                                    <p>
                                                        <small>AdminTemplate Inc.</small>
                                                    </p>
                                                </a>
                                            </div>
                                        </div>
                                        <a class="left carousel-control bk-carousel-control bk-carousel-control-white bk-carousel-hide-init" href="#carousel-example-generic3" role="button" data-slide="prev">
                                            <span class="fa fa-angle-left icon-prev bk-bg-very-light-gray"></span>
                                        </a>
                                        <a class="right carousel-control bk-carousel-control bk-carousel-control-white bk-carousel-hide-init" href="#carousel-example-generic3" role="button" data-slide="next">
                                            <span class="fa fa-angle-right icon-next"></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <hr class="bk-margin-off">
                <div class="bk-ltr bk-bg-white">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="bk-bg-white text-center bk-padding-top-20 bk-padding-bottom-10">
                                <div class="row">
                                    <div class="text-left bk-padding-left-10">
                                        <h4 class="bk-margin-off">Address</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="bk-bg-white bk-bg-lighten bk-padding-top-10 bk-padding-left-20">
                                <div class="pull-left bk-margin-right-10">
                                    <div class="bk-round bk-bg-darken bk-border-off">
                                        <i class="fa fa-map-marker fa-2x bk-fg-danger"></i>
                                    </div>
                                </div>
                                <p class="text-left">
                                    <small>Blackstreet No. 256, 1256 California, USA</small>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bk-ltr bk-padding-bottom-20 bk-padding-left-20">
                    <div class="row">
                        <div class="col-12-4 col-md-12 col-sm-12 col-xs-12 bk-bg-white bk-padding-top-10">
                            <i class="fa fa-phone"></i> +25 2569 256
                        </div>
                        <div class="col-12-4 col-md-12 col-sm-12 col-xs-12 bk-bg-white bk-padding-top-10">
                            <i class="fa fa-tablet"></i> +62 2569 2568 256
                        </div>
                        <div class="col-12-4 col-md-12 col-sm-12 col-xs-12 bk-bg-white bk-padding-top-10">
                            <i class="fa fa-envelope"></i> jhonsmith@mail.com
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-7 col-md-9 col-sm-9">
        <div class="panel">
            <div class="panel-body">
                <div class="tabs">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#overview" data-toggle="tab">Overview</a>
                        </li>
                        <li>
                            <a href="#edit" data-toggle="tab">Edit</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="overview" class="tab-pane active">
                            <div class="bk-bg-white bk-padding-top-10 bk-padding-bottom-10">
                                <h4>Update Status</h4>
                                <div class="bk-bg-white">
                                    <form role="form" action="javascript:">
                                        <input class="form-control" placeholder="What's on your mind?" type="email">
                                    </form>
                                </div>
                                <div class="bk-bg-white bk-margin-15">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-link"><i class="fa fa-map-marker"></i></button>
                                        <button type="button" class="btn btn-link"><i class="fa fa-camera"></i></button>
                                        <button type="button" class="btn btn-link"><i class="fa fa-video-camera"></i></button>
                                    </div>
                                    <div class="pull-right">
                                        <button type="button" class="btn btn-primary"><i class="fa fa-lightbulb-o"></i> Post</button>
                                    </div>
                                </div>
                            </div>
                            <h5>Timeline</h5>
                            <div class="timelineProfile timeline-profile">
                                <div class="timeline-body">
                                    <div class="timeline-title">
                                        <h5 class="text-uppercase">September 2014</h5>
                                    </div>
                                    <ol class="timeline-items">
                                        <li>
                                            <div class="timeline-box">
                                                <p class="text-muted">5 months ago.</p>
                                                <p>
                                                    It's awesome when we find a good solution for our projects, Nadhif Admin is <span class="text-primary">#awesome</span>
                                                </p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="timeline-box">
                                                <p class="text-muted">5 months ago.</p>
                                                <p>
                                                    What is your greatest projects for your Administrator?
                                                </p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="timeline-box">
                                                <p class="text-muted">5 months ago.</p>
                                                <p>
                                                    Checkout! How cool is that!
                                                </p>
                                                <div class="img-timeline">
                                                    <a class="img-thumbnail lightbox" href="assets/img/gallery/photo5.jpg" data-plugin-options="{ &quot;type&quot;:&quot;image&quot; }">
                                                        <img class="img-responsive" src="assets/img/gallery/photo5.jpg" width="215">
                                                        <span class="zoom">
                                                            <i class="fa fa-search"></i>
                                                        </span>
                                                    </a>
                                                </div>
                                            </div>
                                        </li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                        <div id="edit" class="tab-pane updateProfile">
                            <form class="form-horizontal" method="get">
                                <div class="bk-bg-white bk-padding-top-10 bk-padding-bottom-10">
                                    <h4>Personal Information</h4>
                                    <fieldset>
                                        <div class="form-group">
                                            <label for="profileFirstName">First Name</label>
                                            <input class="form-control" id="profileFirstName" placeholder="Enter your first name" type="text">
                                        </div>
                                        <div class="form-group">
                                            <label for="profileLastName">Last Name</label>
                                            <input class="form-control" id="profileLastName" placeholder="Enter your last name" type="text">
                                        </div>
                                        <div class="form-group">
                                            <label for="profileAddress">Address</label>
                                            <input class="form-control" id="profileAddress" placeholder="Enter your address" type="text">
                                        </div>
                                        <div class="form-group">
                                            <label for="profileCompany">Company</label>
                                            <input class="form-control" id="profileCompany" placeholder="Enter your company name" type="text">
                                        </div>
                                    </fieldset>
                                    <hr>
                                    <h4>About Yourself</h4>
                                    <fieldset>
                                        <div class="form-group">
                                            <label for="profileBio">Biographical Info</label>
                                            <textarea class="form-control" rows="5" id="profileBio" placeholder="Start typing"></textarea>
                                        </div>
                                        <div class="form-group">
                                            <div class="checkbox-custom checkbox-default bk-margin-bottom-10">
                                                <input id="profilePublish" name="profilePublish" value="profilePublish" type="checkbox">
                                                <label for="profilePublish"> Publish</label>
                                            </div>
                                        </div>
                                    </fieldset>
                                    <hr>
                                    <h4>Change Password</h4>
                                    <fieldset>
                                        <div class="form-group">
                                            <label for="profileNewPassword">New Password</label>
                                            <input class="form-control" id="profileNewPassword" placeholder="Type New Password" type="text">
                                        </div>
                                        <div class="form-group">
                                            <label for="profileNewPasswordRepeat">Repeat New Password</label>
                                            <input class="form-control" id="profileNewPasswordRepeat" placeholder="Retype New Password" type="text">
                                        </div>
                                    </fieldset>
                                    <div class="bk-bg-white">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="pull-right">
                                                    <button type="submit" class="btn btn-primary">Submit</button>
                                                    <button type="reset" class="btn btn-default">Reset</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
